<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">

		<z-paging ref="paging" class="paging" v-model="infoList" @query="queryList" :fixed="false" :auto="false">

			<view class="viewBox">
				<view v-for="item in infoList" class="itemView" @click="clickItem(item)">
					<view class="view">
						<image src="../../static/notice.png" style="width: 52rpx;height: 52rpx;"></image>
						<text class="title" style="color: #1677FF;">{{item.NTitle}}</text>
						<view style="flex: 1;"></view>
						<text class="time">{{item.NCreateTime}}</text>
					</view>
					<rich-text class="contentText" :nodes="item.NContent"></rich-text>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		GetListNotice
	} from "../../common/api.js"
	export default {
		data() {
			return {
				infoList: [],
				firstLoaded: false
			}
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},

			searchParam: {
				type: String,
				default: function() {
					return ''
				}
			},


		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							this.$nextTick(() => {
								this.$refs.paging.reload();
							})
						}
					}
				},
				immediate: true
			},

			searchParam: {
				handler(newVal) {
					this.$nextTick(() => {
						this.$refs.paging.reload();
					})
				},
				immediate: true
			},
		},
		methods: {
			//轮播图
			change(e) {
				this.current = e.detail.current
			},

			clickItem(item) {
				uni.navigateTo({
					url: '/pages/Home/Details/Details?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},

			async queryList(pageNo, pageSize) {
				var data = {
					NTitle: this.searchParam,
					page: pageNo,
					size: pageSize
				}
				let res = await GetListNotice(data)
				var value = res.response.data
				value.forEach((item, index) => {
					value[index].NContent = item.NContent.replace(/\/api/g, getApp().globalData.requesturl + '/api');
				})
				this.$refs.paging.complete(value);
				this.firstLoaded = true;
			},
		}
	}
</script>

<style scoped>
	.content {
		flex: 1;
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		background-color: #f4f4f4;
	}

	.paging {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
	}

	.viewBox {
		display: flex;
		flex-direction: column;
		margin-left: 24rpx;
		margin-right: 24rpx;

	}

	.itemView {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-top: 24rpx;
	}

	.view {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.title {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1677FF;
		line-height: 42rpx;
		margin-left: 24rpx;
	}

	.time {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
	}

	.contentText {
		width: 100%;
		height: auto;
		/*高度自动*/
		display: inline-block;
		/*转为行内块元素*/
		white-space: pre-wrap;
		/*处理元素内的空白,保留空白符序列，但是正常地进行换行*/
		word-wrap: break-word;
		/*允许长单词或 URL 地址换行到下一行,在长单词或 URL 地址内部进行换行*/
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
		margin-top: 28rpx;
	}
</style>
